<%--
  Created by IntelliJ IDEA.
  User: 86917
  Date: 2020/10/29
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<%@include file="../layout/header.jsp" %>
<%@include file="../layout/script.jsp" %>

<head>
    <title>案卷目录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/cropper.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/ImgCropping.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <style>
        .table tbody tr.active {
            background: skyblue;
        }
        #syy.disabled,
        #xyy.disabled {
            color: #ccc;
            pointer-events: none;
        }
        .noData{
            color:#ccc;
        }
        .noData:hover{
            color: #ccc;
        }
    </style>
</head>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/static/js/cropper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/main.js"></script>

<body>
    <div style="width: 100%;height: 100%;padding: 0 5px;">
        <div style="height: 6%;text-align: left;width: 100%">
            <table style="border-bottom:  1px solid #888;width: 100%">
                <tr style="height: 8px;"></tr>
                <tr>
                    <td>
                        <button style="font-size: 18px;font-weight: 600;" type="button" class="btn btn-link" id="retu" onclick="window.history.back(-1)">
                            <span style="font-size: 18px;" class="glyphicon glyphicon-hand-left"></span>
                            返回
                        </button>
                        <!-- <input type="button" value="返回" id="retu" onclick="window.history.back(-1)"> -->
                    </td>
                </tr>
                <tr style="height: 8px;"></tr>
            </table>
        </div>
        <div style="margin-top: 10px;height: 93%;">
            <div style="width: 30%;height:100%;display:inline-block">
                <div>
                    <table style="width: 100%;">
                        <tr align="center">
                            <td></td>
                            <td style="width: 40%;"><input class="form-control input-sm" type="text" name="gName" id="gName" value="${mapData.get("gName")}"></td>
                            <td style="width: 15%;"></td>
                            <td style="width: 40%;">
                                <button type="button" class="btn btn-info btn-sm" onclick="chaxun()">查询</button>
                                <button type="button" class="btn btn-info btn-sm" onclick="batchPrint()">批量打印</button>
                                <!-- <input type="button" onclick="chaxun()"  value="查询">&nbsp;&nbsp;
                                <input type="button" onclick="batchPrint()"  value="批量打印"> -->
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="margin-top: 8px;">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <td style="font-size: 19px">案卷目录</td>
                        </tr>
                        </thead>
                        <tbody class="filetbody">
                        <c:forEach items="${pageInfo.list}" var="record">
                            <tr>
                                <td>
                                    <a class="detail" onclick="showFtime(this,'${record.id}','${record.fileName}')">${record.fileName}</a>
                                </td>
                            </tr>
                        </c:forEach>
                        <tr>
                            <td colspan="14" style="text-align: right">
                                共${pageInfo.total}条数据,&nbsp;共${pageInfo.pages}页,&nbsp;当前页<span id="mySpan">${pageInfo.pageNum}<span>,
                                <a onclick="syy(this)" id="pre">上一页</a>,
                                <a onclick="xyy(this)" id="next">下一页</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 70%;height:100%;display:inline-block;float: right;overflow: auto;">
                <div align="center" style="height: 5%;font-size: 22px" id="rollImageDiv"> </div>
                <table id="fileImageTable" style="width: 100%;"  class="table table-bordered">
                    <thead>
                        <tr>
                            <td colspan='2' style='font-size: 15px;'></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align='center' style='width: 30%;vertical-align: middle'></td>
                            <td align='center' style='width: 70%;'></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <div id="outerdiv" style="position:fixed;top:0;left:0;background:#fff;z-index:2;width:100%;height:100%;display:none;overflow: auto">
                <%@include file="imagebl.jsp" %>
            </div>
        </div>
    </div>
    <div id="spin">
        <div id="spinContent">
            加载中......
        </div>
    </div>
</body>
<script type="text/javascript">
    <%--
        $('#spin').show() 打开
        $('#spin').hide() 关闭

    --%>
    function chaxun(){
        var gName = $("#gName").val();
        var url="${pageContext.request.contextPath}/arc_file/fileIndex?arcNum=${mapData.get("arcNum")}&fileName="+gName;
        window.location.href=url;
    }

    function syy(){
        let bb = $("#prv");
        console.log(bb);
        if (${pageInfo.pageNum} != 1 ) {
            //得到input的值
            var gName = $("#gName").val();
            var pageNo=${pageInfo.pageNum}-1;
            if(pageNo<1){
                pageNo=1;
            }
            var url="${pageContext.request.contextPath}/arc_file/fileIndex?pageNo="+pageNo+"&arcNum=${mapData.get("arcNum")}&fileName="+gName;
            window.location.href=url;
        }

    }

    function xyy(){
        if (${pageInfo.pageNum} != ${pageInfo.pages}) {
            //得到input的值
            var gName = $("#gName").val();
            var pageNo=${pageInfo.pageNum}+1;
            if(pageNo>${pageInfo.pages}){
                pageNo=${pageInfo.pages};
            }
            var url="${pageContext.request.contextPath}/arc_file/fileIndex?pageNo="+pageNo+"&arcNum=${mapData.get("arcNum")}&fileName="+gName;
            window.location.href=url;
        }
    }

    function pageLoad() {
        if (${pageInfo.pageNum} === 1) {
            $("#pre").addClass("noData");
        }
        if (${pageInfo.pageNum} === ${pageInfo.pages}) {
            $("#next").addClass("noData");
        }
    }

    function batchPrint() {
        var arr="";
        var iptArr=$("input[name='tifcheckbox']:checked")
        for(var index=0;index<iptArr.length;index++){
            arr+=iptArr[index].value+",";
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/arc_roll/batchprint",
            type: 'GET',
            async: true,
            contentType: "application/json",
            data:{
                'ids':arr,
                // 'ids':JSON.stringify(arr)
            },
            success: function (res) {

            },
            error: function (err) {
            }
        })
    }

    <%--function test() {--%>
    <%--    $.ajax({--%>
    <%--        url: "${pageContext.request.contextPath}/arc_roll/imagebase64",--%>
    <%--        type: 'GET',--%>
    <%--        async: true,--%>
    <%--        contentType: "application/json",--%>
    <%--        data:{--%>
    <%--        },--%>
    <%--        success: function (res) {--%>

    <%--        },--%>
    <%--        error: function (err) {--%>
    <%--        }--%>
    <%--    })--%>
    <%--}--%>

    function showImageData(){
        var id="${pageInfo.list.get(0).id}"
        var name="${pageInfo.list.get(0).fileName}"
        showFtime($('.filetbody tr:first-child a'),id,name);
    }

    setTimeout(function () {
        pageLoad();
        showImageData();
    },200)
    function showFtime(self,id,name){
        $('#spin').show()
        // document.getElementById("rollImageDiv").innerHtml=name;
        $("#rollImageDiv").text(name);
        $(self).parents('tr').addClass('active').siblings().removeClass('active')
        $.ajax({
            url: "${pageContext.request.contextPath}/arc_roll/listAll?rId="+id,
            type: 'GET',
            async: true,
            contentType: "application/json",
            data:{
            },
            success: function (res) {
                $('#spin').hide()
                $("#fileImageTable").empty();
                var dataJson=JSON.stringify(res);
                var jsonData=JSON.parse(dataJson);
                var html=""
                html +=" <thead><tr><td></td><td align='center' style='font-size: 15px;'>序号</td><td align='center' style='font-size: 15px;'>文件名称</td><td align='center' style='font-size: 15px;'>缩略图</td></tr></tr> </thead>";
                html +="<tbody id='checkboxtif'>";
                for (var i=0;i<jsonData.length;i++){
                    html +=" <tr> ";
                    html+="	<td align='center' style='width: 10%;vertical-align: middle'><input type='checkbox' name='tifcheckbox' value='"+jsonData[i].id+"'></td>";
                    html+="	<td align='center' style='width: 10%;vertical-align: middle'>"+(i+1)+"</td>";
                    html+="	<td align='center' style='width: 30%;vertical-align: middle'>"+jsonData[i].gName+"</td>";
                    html+="	<td align='center' style='width: 50%;'><img height='70' width='auto' onclick='pimg(\""+jsonData[i].imageUrl+"\")' src='${pageContext.request.contextPath}/arc_roll/getImg?url="+jsonData[i].imageUrl+"/0.jpg' /></td>";
                    html+="	</tr>  ";
                }
                html +="</tbody>";
                $("#fileImageTable").append(html);
            },
            error: function (err) {
            }
        })
    };

    //返回
    function returnTifImageShow() {
        var imagePath=$('#tailoringImg').attr('src');
        $('#tailoringImg').cropper("reset");
        $('#tailoringImg').cropper('clear');


        $('#tailoringImg').attr('src','')
        $('#tailoringImg').cropper("destroy");
        $('.tailoring-content-two').show()
        $('#outerdiv').fadeOut("fast");
        tifImageShow(imagePath);
    }
    //显示图片
    function pimg(imageUtl) {
        tifImageShow("${pageContext.request.contextPath}/arc_roll/getImg?url="+encodeURIComponent(imageUtl)+"/0.jpg");
    }

    function tifImageShow(imgurl) {
        // $('#spin').show()
        var options={
            checkCrossOrigin: true,
            aspectRatio: NaN, //默认比例
            // preview: '.previewImg', //预览视图
            guides: false, //裁剪框的虚线(九宫格)
            movable: true, //是否允许移动图片
            dragCrop: false, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            resizable: true, //是否允许改变裁剪框的大小
            zoomable: true, //是否允许缩放图片大小
            mouseWheelZoom: true, //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true, //是否允许通过触摸移动来缩放图片
            rotatable: true, //是否允许旋转图片
            autoCrop: false, //是否默认出现裁剪框
            dragMode: 'move',
            minContainerHeight: 500,
            minContainerWidth: 500,
        }
        $('#tailoringImg').attr("src", imgurl);//设置#bigimg元素的src属性
        $('#finalImg').attr("src", imgurl);//设置#bigimg元素的src属性
        $('#tailoringImg').cropper(options);

        //退出
        $("#closeModalt").on("click", function() {
            options={}
            $('#tailoringImg').cropper("reset");
            $('#tailoringImg').cropper('clear');
            $('#tailoringImg').attr('src','')
            $('#tailoringImg').cropper("destroy");
            $('#outerdiv').fadeOut("fast");
        });
        var windowW = $(window).width();//获取当前窗口宽度
        $('#outerdiv').fadeIn("fast");
    };

    $('.detail').on('click', function() {
        $(this).parents('tr').addClass('active').siblings().removeClass('active')
    });
</script>
<style>
    #spin{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right:0;
        bottom:0;
        text-align: center;
        line-height: 1;
        background-color: rgba(255,255,255,0.6);
        text-align: center;
        display:none;
        z-index:9999999;
    }
    #spinContent{
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 26px;
    }
</style>
</html>
